<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>图书管理系统</h1>

        <!-- 搜索框和搜索按钮 -->
        <div class="search-bar">
            <input type="text" id="search" placeholder="输入图书名称或简介搜索...">
            <button onclick="searchBooks()">搜索</button>
        </div>

        <!-- 搜索结果区域 -->
        <div class="search-results">
            <h2>搜索结果</h2>
            <ul id="searchResultList"></ul>
        </div>

        <!-- 导出选中内容按钮 -->
        <div class="export-section">
            <button onclick="exportSelectedBooks()">导出选中内容</button>
        </div>

        <!-- 新建/修改图书 -->
        <div class="form-section">
            <h2>新建/修改图书</h2>
            <input type="text" id="bookName" placeholder="图书名称">
            <textarea id="bookDesc" placeholder="图书简介"></textarea>
            <div class="form-actions">
                <button onclick="saveBook()">保存图书</button>
                <button onclick="clearForm()">清空</button>
            </div>
        </div>

        <!-- 查询结果区域 -->
        <div class="book-select-section">
            <h2>图书列表</h2>
            <select id="bookSelect">
                <option value="">选择图书</option>
            </select>
            <button onclick="deleteBook()">删除图书</button>
            <div id="bookDetails">
                <h3>图书简介：</h3>
                <p id="bookDescription"></p>
            </div>
        </div>
    </div>

    <script src="scripts.js"></script>
</body>
</html>

